<template>
  <!-- 头部 -->
  <el-container class="home-container">
    <el-header>
      <div>
        <img src="../assets/submarine-gae0433e6a_1280.png"/>
        <span style="font-size: 20px;margin-left:20px" @click="onHome">扶贫助农平台</span>
      </div>
      <div>
        <el-button type="success" plain @click="onHome" size="mini">跳转至前台页面</el-button>
        <el-button type="primary" size="mini" @click="out">退出</el-button>
      </div>
    </el-header>
    <!-- 主体 -->
    <el-container>
      <el-aside width="220px">
        <el-menu
          :router="true"
          background-color="#EBEEF5"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/shouye">
            <i class="el-icon-location"></i>
            <span slot="title">主页</span>
          </el-menu-item>
          <el-submenu index="a">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>志愿者</span>
            </template>
            <el-menu-item index="/zhiyuanzhe">志愿者管理</el-menu-item>
          </el-submenu>
          <el-submenu index="b">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>贫困户</span>
            </template>
            <el-menu-item index="/pinkunhu">贫困户管理</el-menu-item>
          </el-submenu>
          <el-submenu index="c">
            <template slot="title">
              <i class="el-icon-s-check"></i>
              <span>留言板</span>
            </template>
            <el-menu-item index="/liuyanban">留言板管理</el-menu-item>
          </el-submenu>
          <el-submenu index="d">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>扶贫政策</span>
            </template>
            <el-menu-item index="fupin">扶贫政策管理</el-menu-item>
          </el-submenu>
          <el-submenu index="e">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户</span>
            </template>
            <el-menu-item index="/yonghu">用户管理</el-menu-item>
          </el-submenu>
          <el-submenu index="f">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>收藏</span>
            </template>
            <el-menu-item index="/shoucang">收藏管理</el-menu-item>
          </el-submenu>
          <el-submenu index="g">
            <template slot="title">
              <i class="el-icon-s-flag"></i>
              <span>轮播图</span>
            </template>
            <el-menu-item index="/lunbotu">轮播图管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
       </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name:'Main',
  methods: {
    onHome(){
      this.$router.push('/home')
    },
    out(){
      this.$router.push('/login')
      window.sessionStorage.setItem('token',null)
    }
  },
  beforeCreate () {
    this.$router.push('/yonghu')
  }
};
</script>

<style lang="scss">
.home-container {
  height: 100%;
}
.el-header {
  background-image: linear-gradient(to top, #b6c2d8 0%, #747474 100%);
  display: flex;
  justify-content: space-between;
  div {
    display: flex;
    align-items: center;
    img {
      width: 50px;
    }
  }
}
.el-aside {
  background-image: linear-gradient(to top, #b6c2d8 0%, #747474 100%);
  color: #333;
}
.el-menu-item {
  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%) !important;
}
</style>